<template>
  <div style="width:1200px">
    <div class="xian"></div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{id > 0 ? '编辑' : '添加'}}分类信息 {{parentId > 0 ? parentTitle : ''}}</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div>
        <el-form :model="form" label-width="100px" size="small">
          <el-form-item label="分类标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="导航上的图" v-show="parentId == 30">
            <el-row :gutter="1">
              <el-col :span="20">
                <el-input v-model="form.imgSrc"></el-input>
              </el-col>
              <el-col :span="3">
                <el-upload action="/api/uploadImg" name="multipartFile" :show-file-list="false" accept="image/*" :on-success="uploadSuccess" :on-error="uploadError">
                  <el-button type="primary">上传
                    <i class="el-icon-upload el-icon--right"></i>
                  </el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="Banner大图" v-show="parentId == 30">
            <el-row :gutter="1">
              <el-col :span="20">
                <el-input v-model="form.description"></el-input>
              </el-col>
              <el-col :span="3">
                <el-upload action="/api/uploadImg" name="multipartFile" :show-file-list="false" accept="image/*" :on-success="uploadSuccess1" :on-error="uploadError">
                  <el-button type="primary">上传
                    <i class="el-icon-upload el-icon--right"></i>
                  </el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="详细信息" v-show="parentId == 30">
            <script id="content" type="text/plain"></script>
          </el-form-item>
          <el-form-item label="详情下方大图" v-show="parentId == 30">
            <el-row :gutter="1">
              <el-col :span="20">
                <el-input v-model="form.titleEn"></el-input>
              </el-col>
              <el-col :span="3">
                <el-upload action="/api/uploadImg" name="multipartFile" :show-file-list="false" accept="image/*" :on-success="uploadSuccess2" :on-error="uploadError">
                  <el-button type="primary">上传
                    <i class="el-icon-upload el-icon--right"></i>
                  </el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit()">确定</el-button>
            <!-- <el-button @click="goBack()" style="margin-left: 8px">返回</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  insertCategory,
  updateCategory,
  findCategoryById
} from "@/api/category"

export default {
  name: "categoryEdit",
  data() {
    return {
      id: this.$route.query.id,
      parentTitle: this.$route.query.title,
      parentId:
        this.$route.query.parentId == null ? 0 : this.$route.query.parentId,
      layer: this.$route.query.layer == null ? 0 : this.$route.query.layer + 1,
      form: {
        title: "",
        imgSrc:'',
        titleEn:'',
        description:'',
        content:''
      },
      config: {
        autoHeightEnabled: false,
        autoFloatEnabled: false, //是否工具栏可浮动
        autoClearinitialContent: true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 200,
        UEDITOR_HOME_URL: "static/ueditor/"
      },
      editor: null
    }
  },
  mounted() {
    this.initEditInfo()
  },
  methods: {
    initEditInfo() {
      let _this = this
      if (this.id > 0) {
        findCategoryById(this.id).then(data => {
          this.form = data
          this.editor = UE.getEditor("content", this.config) // 初始化UE
          if (data.content != null && data.content != "") {
            this.editor.addListener("ready", function() {
              _this.editor.setContent(data.content) // 确保UE加载完成后，放入内容。
            })
          }
        })
      }else{
        this.editor = UE.getEditor("content", this.config) // 初始化UE
      }
    },
    uploadSuccess(response, file, fileList) {
      this.form.imgSrc = response.data.file_name
    },
    uploadSuccess1(response, file, fileList) {
      this.form.description = response.data.file_name
    },
    uploadSuccess2(response, file, fileList) {
      this.form.titleEn = response.data.file_name
    },
    uploadError() {},
    submit() {
      if (this.form.title == "") {
        this.$message.error("请输入分类名称!")
        return
      }

      if (this.editor != null) {
        this.form.content = this.editor.getContent()
      }
      if (this.id > 0) {
        updateCategory(this.form).then(data => {
          if (data.result) {
            this.$message({
              message: "更新成功",
              type: "success"
            })
          } else {
            this.$message.error("更新失败!")
          }
        })
      } else {
        this.form.parentId = this.parentId
        this.form.layer = this.layer
        insertCategory(this.form).then(data => {
          if (data.result) {
            this.$message({
              message: "添加成功",
              type: "success"
            })
            this.form = {}
            this.editor.setContent("")
          } else {
            this.$message.error("添加失败!")
          }
        })
      }
    },
    goBack() {
      this.$router.push({ name: "category_list",query:{parentId:this.parentId} })
    }
  },
  destroyed() {
    if (this.editor != null) {
      this.editor.destroy()
    }
  }
}
</script>
